<template>
    <MainModule>
        <template #header>
            <MyRowForm :gutter="16">
                <MyColFormItem :span="6" :label="TableLabel.ShopCode + ': '">
                    <el-input v-model.trim="table.selectParams.ShopCode" :placeholder="'请输入' + TableLabel.ShopCode"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.ShopName + ': '">
                    <el-input v-model.trim="table.selectParams.ShopName" :placeholder="'请输入' + TableLabel.ShopName"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.DishGuid + ': '">
                    <el-input v-model.trim="table.selectParams.DishGuid" :placeholder="'请输入' + TableLabel.DishGuid"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.DishCode + ': '">
                    <el-input v-model.trim="table.selectParams.DishCode" :placeholder="'请输入' + TableLabel.DishCode"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.DishName + ': '">
                    <el-input v-model.trim="table.selectParams.DishName" :placeholder="'请输入' + TableLabel.DishName"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem>
                    <template #col>
                        <el-button type="primary" @click="Add">新增</el-button>
                        <el-button type="success" @click="Select">查询</el-button>
                        <el-button type="warning" @click="Reset">重置</el-button>
                    </template>
                </MyColFormItem>
            </MyRowForm>
        </template>

        <MyTable v-bind="MyTableConfig" :serial="(table.selectParams.Page - 1) * table.selectParams.PageSize + 1"></MyTable>
        <EditDialog v-model:visible="EditDialogParams.visible" @submit-success="Select">
        </EditDialog>

        <template #footer>
            <MyPagination :total="table.total" v-model:page-size="table.selectParams.PageSize"
                v-model:current-page="table.selectParams.Page" @change="Select"></MyPagination>
        </template>
    </MainModule>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from "vue";
import { MainModule, MyTable, MyPagination, MyRowForm, MyColFormItem } from "@/components"
import type { MyTableType } from "@/components"
import { LabelPrintRecordApiUrl, LabelPrintRecordApi } from "@/api/factory_manager/label_print_record"
import { PaginationParams } from "@/library/common"
import * as types from "./types"
import { TableLabel, columns } from "./ConfigData"
import EditDialog from "./EditDialog.vue"
import { useMainLoading } from "@/hooks/useMainLoading"
import { AbortApi } from "@/library/utils/request"

const { openMainLoading, closeMainLoading } = useMainLoading()

const initForm: types.SelectParamsType = {
    ...PaginationParams
}
const table = reactive({
    selectParams: { ...initForm },
    total: 0,
})

const MyTableConfig = reactive<MyTableType>({
    loading: false,
    table: {
        data: []
    },
    columns
})

const Select = async () => {
    MyTableConfig.loading = true

    try {
        const { Data } = await LabelPrintRecordApi.Select(table.selectParams)
        MyTableConfig.table.data = Data.Data
        table.total = Data.Count
    }
    catch (error) { }
    finally {
        MyTableConfig.loading = false
    }
}

const Reset = () => {
    table.selectParams = { ...initForm }
}

const EditDialogParams = reactive({
    visible: false,
})
const Add = () => {
    EditDialogParams.visible = true
}

onMounted(async () => {
    openMainLoading()
    await Select()
    closeMainLoading()
})

onUnmounted(() => {
    AbortApi(LabelPrintRecordApiUrl.Select)
})

</script>

<style scoped></style>